<template>
  <div class="me">
    <!-- 引入头部组件 -->
    <div class="headerBox">
      <header1View>
        <template v-slot:left>
          <div class="header_left">
            <van-icon name="setting"
                      @click="toSetting"
                      class="icon" />
          </div>
        </template>
        <template v-slot:center>
          <div class="header_center">
            我的
          </div>
        </template>
        <template v-slot:right>
          <div class="header_right">
            <van-icon name="chat"
                      class="icon" />
          </div>
        </template>
      </header1View>
    </div>
    <!-- 店铺信息 -->
    <div class="shopInfo">
      <div class="shop_left">
        <img src="https://cdn3.axureshop.com/demo/1525603/images/%E9%80%89%E6%8B%A9%E5%BA%97%E9%93%BA/u1063.png"
             alt="">
      </div>
      <div class="shop_right">
        <div class="shopName">默林如斯的肠粉早餐店（凤凰广场店）</div>
        <div class="shopTel">帐号：{{userName}}</div>
      </div>
    </div>
    <div class="content">
      <div class="shopDetail">
        <!-- 店铺公告 -->
        <div class="shop"
             @click="notice">
          <div>
            <van-icon name="bullhorn-o" />
            <span class="title">店铺公告</span>
          </div>
          <div>
            <van-icon name="arrow" />
          </div>
        </div>
        <!-- 店铺管理 -->
        <div class="shop"
             @click="notice">
          <div>
            <van-icon name="shop-o" />
            <span class="title">店铺管理</span>
          </div>
          <div>
            <van-icon name="arrow" />
          </div>
        </div>
        <!-- 店铺店招 -->
        <div class="shop"
             @click="notice">
          <div>
            <van-icon name="friends-o" />
            <span class="title">店铺店招</span>
          </div>
          <div>
            <van-icon name="arrow" />
          </div>
        </div>
        <!-- 门店环境 -->
        <div class="shop"
             @click="notice">
          <div>
            <van-icon name="wap-home-o" />
            <span class="title">门店环境</span>
          </div>
          <div>
            <van-icon name="arrow" />
          </div>
        </div>
        <!-- 到店自取 -->
        <div class="shop"
             @click="notice">
          <div>
            <van-icon name="diamond-o" />
            <span class="title">到店自取</span>
          </div>
          <div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>

      <!-- 测试扫码 -->
      <!-- <button @click="scanCode()">点击扫码</button> -->
    </div>

    <div class="info">
      <!-- 资质信息 -->
      <div class="shop"
           @click="notice">
        <div>
          <van-icon name="award-o" />
          <span class="title">资质信息</span>
        </div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 账户信息 -->
      <div class="shop"
           @click="notice">
        <div>
          <van-icon name="user-circle-o" />
          <span class="title">账户信息</span>
        </div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <!-- 帮助中心 -->
    <div class="help"
         @click="notice">
      <div class="shop">
        <div>
          <van-icon name="service-o" />
          <span class="title">帮助中心</span>
        </div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div>
      <HomeBottom></HomeBottom>
    </div>

  </div>
</template>

<script>
import { Toast } from 'vant';
import header1View from '../../components/OrdersComponents/header1View'
import HomeBottom from '../../components/homepage/HomeBottom.vue'

Toast.setDefaultOptions({ duration: 500 });//设置提示显示的时间
export default {
  data () {
    return {
      userName: this.$store.state.userNumber
    }
  },
  created () {
    // this.userName=this.$store.state.userNumber
    console.log(this.$store.state.userNumber)
  },
  components: {
    header1View,
    HomeBottom
  },
  methods: {
    toSetting () {
      this.$router.push({ path: '/setting' })
    },
    notice () {
      Toast('此功能还在开发中')
    },
    // 扫码
    // scanCode () {
    //   console.log('浏览器信息', navigator.userAgent);
    //   this.$router.push({
    //     path: '/scanCodePage'
    //   });
    // }

  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}

.header_box {
  background-color: #ff6e53;
}
.header_left {
  color: #000;
}
.header_center {
  color: #fff;
  width: 100px;
  text-align: center;
  margin: 0 auto;
}
.header_right {
  margin-right: 10px;
}
.icon {
  color: #fff;
  margin-right: 10px;
  font-size: 18px;
}
.shopInfo {
  padding: 15px;
  display: flex;
  font-size: 14px;
  background-color: #ff6e53;
}
.shop_right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
}
.shopName {
  color: #fff;
}
.shopTel {
  color: rgb(211, 208, 208);
  font-size: 12px;
}
.me {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-size: 14px;
}

.shopDetail,
.info,
.help {
  margin-top: 15px;
  background-color: #fff;
  padding: 15px;
}
.shop {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.title {
  margin-left: 10px;
}
</style>